<template>
  <div id="eventSearch" class="con-box">
    <v-header title="事件明细" :showDownloadBtn="false" :saveShow="false"></v-header>
    <el-container class="meta-colume-box">
      <el-header class="query-box">
          <el-row>
            <el-col :span="10">
              <div class="query-item">
                <span class="label">事件名称：</span>
                <el-input v-model="query.event_name" size="mini" placeholder="请输入内容"
                      clearable></el-input>
              </div>
              <div class="query-item">
                <span class="label">事件ID：</span>
                <el-input v-model="query.event_id" size="mini" placeholder="请输入内容"
                      clearable></el-input>
              </div>
            </el-col>
            <el-col :span="10">
              <div class="query-item">
                <span class="label">事件类型：</span>
                <el-input v-model="query.event_type" size="mini" placeholder="请输入内容"
                      clearable></el-input>
              </div>
              <div class="query-item">
                <span class="label">元数据代码：</span>
                <el-input v-model="query.meta_id" size="mini" placeholder="请输入内容"
                      clearable></el-input>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="button-box">
                <el-button type="primary" size="mini" @click="filterQuery">查询</el-button>
              </div>
            </el-col>
          </el-row>
      </el-header>
      <el-main>
        <!--表格-->
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          v-loading="tableLoading"
          class="eventSearchTable"
          style="width: 100%">
          <el-table-column
            prop="meta_id"
            label="元数据代码"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="event_id"
            label="事件id"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="event_name"
            label="事件名称"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="event_type"
            label="事件类型"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="event_group"
            label="事件分组"
            width="auto">
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          class="pagination">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>
<script>
  import './../common/query.styl'
  import { mixinParameterManager } from '../../../../assets/js/mixins'
  import ajax from '../../../../api/ajax/ajax'
  import {VHeader} from '../../../../components'
  import api from '../../../../api/url'
  export default{
    mixins: [mixinParameterManager],
    components: {
      VHeader
    },
    data () {
      return {
        tableLoading: true, // 表格Loading
        tableData: [], // 表格
        totalCount: 10, // 默认数据总数
        currentPage: 1, // 当前页码
        pagesize: 10, // 默认每页数据量
        condition: '', // 输入条件
        query: {
          event_name: '',
          event_id: '',
          event_type: '',
          meta_id: '',
          pageNo: '1',
          pageSize: '10'
        }
      }
    },
    created () {
          this.keyupSubmit()
    },
    methods: {
      // 封装查询数据
      packAjax (data) {
        ajax.post(api.SELECT_BAMETA_EVENT_LIST_FORPAGE, data).then((res) => {
          this.tableLoading = false
          this.tableData = []
          this.tableData = res.data.list
          this.totalCount = res.data.total
        })
      },
      filterQuery () {
        let params = JSON.parse(JSON.stringify(this.query))
        this.packAjax(params)
      },
      keyupSubmit () {
        document.onkeydown = e => {
          let _key = window.event.keyCode
          if (_key === 13) {
            this.filterQuery()
          }
        }
      }
    }
  }
</script>
<style lang="stylus">
#eventSearch
  .query-box
    height auto !important
    padding 15px 0
    .query-item
      line-height 36px
      padding 8px 10px 8px 140px
      position relative
      .label
        position absolute
        left 0
        top 8px
        height 36px
        line-height 36px
        width 140px
        text-align right
      .el-input
        display block
        width 100%
        .el-input__inner
          height 36px
          line-height 36px
      .el-range-editor.el-input__inner
        display block
        width 320px !important
        .el-range-separator
          vertical-align top
          line-height 34px
        .el-range-input
          vertical-align top
          heiht 34px
          line-height 34px
      .el-range-editor--mini.el-input__inner
        height 36px
        line-height 36px
        padding 0 15px
    .button-box
      height 104px
      position relative
      .el-button
        position absolute
        top 50%
        left 50%
        height 36px
        margin -18px 0 0 -50px
  .eventSearchTable
    padding-bottom 0px
  .pagination
    height 50px
    position static
    border 0px
</style>
